import React from 'react';
import { Layout, Menu, Dropdown, Avatar, Space } from 'antd';
import {
    HomeOutlined,
    UserOutlined,
    BookOutlined,
    DownOutlined,
    SolutionOutlined,
    TeamOutlined,
    ApartmentOutlined
} from '@ant-design/icons';
import { Link, Outlet, useNavigate, useLocation } from 'react-router-dom';

const { Header, Sider, Content } = Layout;

export default function NavigationLayout() {
    const navigate = useNavigate();
    const location = useLocation(); // 获取当前路径

    // 当前选中的菜单项
    const selectedKey = location.pathname;

    // 下拉菜单
    const menu = (
        <Menu>
            {/*<Menu.Item key="profile">*/}
            {/*    <Link to="/pages/profile">个人信息</Link>*/}
            {/*</Menu.Item>*/}
            <Menu.Item key="logout" onClick={() => {
                navigate('/login');
            }}>
                退出登录
            </Menu.Item>
        </Menu>
    );

    return (
        <Layout style={{ minHeight: '100vh' }}>
            {/* 左侧菜单 */}
            <Sider theme="light" width={240}>
                <div className="logo" style={{
                    height: 64,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    color: 'black',
                    fontSize: 18,
                }}>
                    <img src="/logo.jpg" width="40" height="40" style={{marginRight: "15px"}} alt="Logo"/>
                    学生信息管理系统
                </div>
                <Menu
                    mode="inline"
                    theme="light"
                    selectedKeys={[selectedKey]}  // 动态绑定当前路径
                    defaultOpenKeys={['sub1', 'sub2']} // 如果有子菜单可以展开
                >
                    <Menu.Item key="/pages/home" icon={<HomeOutlined />}>
                        <Link to="/pages/home">首页</Link>
                    </Menu.Item>

                    <Menu.Item key="/pages/academy" icon={<ApartmentOutlined />}>
                        <Link to="/pages/academy">学院信息管理</Link>
                    </Menu.Item>

                    <Menu.Item key="/pages/specialty" icon={<BookOutlined />}>
                        <Link to="/pages/specialty">专业信息管理</Link>
                    </Menu.Item>

                    <Menu.Item key="/pages/classPage" icon={<TeamOutlined />}>
                        <Link to="/pages/classPage">班级信息管理</Link>
                    </Menu.Item>

                    <Menu.Item key="/pages/teacher" icon={<SolutionOutlined />}>
                        <Link to="/pages/teacher">教师信息管理</Link>
                    </Menu.Item>

                    <Menu.Item key="/pages/student" icon={<UserOutlined />}>
                        <Link to="/pages/student">学生信息管理</Link>
                    </Menu.Item>
                </Menu>
            </Sider>

            {/* 右侧内容区域 */}
            <Layout>
                {/* 头部：用户头像靠右对齐 */}
                <Header style={{
                    background: '#fff',
                    padding: '0 24px',
                    display: 'flex',
                    justifyContent: 'flex-end',
                    alignItems: 'center',
                    height: 64,
                    lineHeight: '64px',
                    borderBottom: '1px solid #e8e8e8'
                }}>
                    <Dropdown overlay={menu} trigger={['hover']}>
                        <Space style={{cursor: 'pointer'}}>
                            <Avatar icon={<UserOutlined/>}/>
                            用户名
                            <DownOutlined/>
                        </Space>
                    </Dropdown>
                </Header>

                {/* 内容区域 */}
                <Content style={{
                    margin: '24px 16px 0',
                    padding: 24,
                    background: '#fff',
                    minHeight: 800,
                    maxHeight: 'calc(100vh - 200px)',
                    overflowY: 'auto'
                }}>
                    <Outlet/>
                </Content>
            </Layout>
        </Layout>
    );
}